<template>
  <div class="orderMain">
    <ul>
      <!-- 订单号 -->
      <li>
        订单号
        <el-input v-model="arr.orderNo" placeholder="请输入内容"></el-input>
      </li>

      <!-- 收货人 -->
      <li>
        收货人
        <el-input v-model="arr.consignee" placeholder="请输入内容"></el-input>
      </li>

      <!-- 手机号 -->
      <li>
        手机号
        <el-input v-model="arr.phone" placeholder="请输入内容"></el-input>
      </li>

      <!-- 订单状态 -->
      <li>
        订单状态
        <el-select v-model="arr.orderState" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </li>
    </ul>

    <div class="time">
      选择时间
      <el-date-picker
        v-model="arr.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="primary" @click="onS">查询</el-button>
    </div>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="orderNo" label="订单号"> </el-table-column>
      <el-table-column label="下单时间">
        <template slot-scope="props">
          {{ props.row.orderTime | hms }}
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="consignee" label="收货人"> </el-table-column>
      <el-table-column prop="deliverAddress" label="配送地址">
      </el-table-column>
      <el-table-column label="送达时间">
        <template slot-scope="props">
          {{ props.row.deliveryTime | hms }}
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="用户备注"> </el-table-column>
      <el-table-column prop="orderAmount" label="订单金额"> </el-table-column>
      <el-table-column prop="orderState" label="订单状态"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="editClick(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="查看订单" :visible.sync="dialogFormVisible">
      <el-form width="500px">
        <el-form-item label="订单号">
          <span>{{ accForm.orderNo }}</span>
        </el-form-item>
        <el-form-item label="下单时间">
          <span>{{ accForm.orderTime | hms }}</span>
        </el-form-item>
        <el-form-item label="手机号">
          <span>{{ accForm.phone }}</span>
        </el-form-item>
        <el-form-item label="收货人">
          <span>{{ accForm.consignee }}</span>
        </el-form-item>
        <el-form-item label="配送地址">
          <span>{{ accForm.deliverAddress }}</span>
        </el-form-item>
        <el-form-item label="送达时间">
          <span>{{ accForm.deliveryTime | hms }}</span>
        </el-form-item>
        <el-form-item label="用户备注">
          <span>{{ accForm.remarks }}</span>
        </el-form-item>
        <el-form-item label="订单金额">
          <span>{{ accForm.orderAmount }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <span>{{ accForm.orderState }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="编辑订单" :visible.sync="edit">
      <div class="flex">
        订单号:<el-input
          v-model="accForm.orderNo"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        下单时间:<el-input
          v-model="accForm.orderTime"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        手机号:<el-input
          v-model="accForm.phone"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        收货人:<el-input
          v-model="accForm.consignee"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        配送地址:<el-input
          v-model="accForm.deliverAddress"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        送达时间:<el-input
          v-model="accForm.deliveryTime"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        用户备注:<el-input
          v-model="accForm.remarks"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        订单金额:<el-input
          v-model="accForm.orderAmount"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="flex">
        订单状态
        <el-select v-model="accForm.orderState" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fn">确 定</el-button>
      </div>
    </el-dialog>

    <div class="fly">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listApi, editApi } from "@/api/order";
export default {
  data() {
    return {
      arr: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      tableData: [],
      state: "",
      value1: "",
      options: ["已受理", "已完成", "配送中"],

      currentPage: 1,
      pageSize: 3,
      total: 0,

      dialogFormVisible: false,
      edit: false,
      accForm: {},
    };
  },
  created() {
    this.getData();
  },

  methods: {
    async getData() {
      let res = await listApi({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        ...this.arr,
        date:
          this.arr.date == null
            ? JSON.stringify([])
            : JSON.stringify(this.arr.date),
      });

      let { data, total } = res.data;

      if (!data.length && this.currentPage != 1) {
        this.currentPage -= 1;
        this.getData();
      }

      this.tableData = data;
      this.total = total;
      // console.log(data);
    },

    handleClick(row) {
      //console.log(row);
      this.dialogFormVisible = true;
      // row.deliveryTime
      this.accForm = { ...row };
      //console.log(this.accForm);
    },

    editClick(row) {
      //console.log(row);
      this.edit = true;
      this.accForm = { ...row };
      //console.log(this.accForm);
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    onS() {
      this.currentPage = 1;
      this.getData();
      this.arr = {};
    },
    async fn() {
      this.edit = false;
      //console.log(this.accForm);
      let res = await editApi(this.accForm);
    },
  },
};
</script>

<style lang="less" scoped>
.orderMain {
  background-color: #fff;
}
ul {
  display: flex;
  margin-bottom: 20px;
  padding-top: 20px;

  li {
    margin-left: 20px;
    display: flex;
  }
}
.time {
  margin-bottom: 20px;
  margin-left: 20px;
  .el-button {
    margin-left: 20px;
  }
}
.fly {
  margin: 20px 0;
}
.flex {
  display: flex;
  margin-bottom: 20px;
}
// /deep/.el-input__inner{
//   width: 300px;
// }
</style>